<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="google" content="notranslate" />
<title>图表设计器</title>
<link rel="shortcut icon" href="../static/img/chart.ico">
<link href="../static/ext-6.6.0/build/classic/theme-classic/resources/theme-classic-all.css"  rel="stylesheet" type="text/css" />
<link href="../static/ext-6.6.0/build/examples/kitchensink/classic-en/resources/KitchenSink-all.css"    rel="stylesheet" type="text/css" />
<link href="../static/css/style.css" rel="stylesheet" type="text/css" />
<link href="../static/css/jquery.fileupload.css" rel="stylesheet" type="text/css"  >

<script src="../static/js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="../static/js/baiduTemplate.js" type="text/javascript"></script>
<script src="../static/js/toSource.min.js" type="text/javascript"></script>
<script src="../static/js/beautify.js" type="text/javascript"></script>
<script src="../static/js/clipboard-polyfill.js" type="text/javascript"></script>
<script src="../static/ext-6.6.0/build/ext-all.js" type="text/javascript"></script>
<script src="../static/ext-6.6.0/build/classic/locale/locale-zh_CN.js" type="text/javascript"></script>
<!--script src="../static/ext-6.6.0/build/packages/charts/classic/charts.js"></script-->
<script src="../static/js/main_left.js" type="text/javascript"></script>
<script src="../static/js/main_top.js" type="text/javascript"></script>
<script src="../static/js/model.js" type="text/javascript"></script>
<script src="../static/js/common.js" type="text/javascript"></script>
<script src="../static/js/dev.js" type="text/javascript"></script>
<script src="../static/js/file.js" type="text/javascript"></script>
<script src="../static/js/chartinfo.js" type="text/javascript"></script>
<script src="../static/js/charttheme.js" type="text/javascript"></script>
<script src="../static/js/datasource.js" type="text/javascript"></script>
<script src="../static/js/datasource_config.js" type="text/javascript"></script>
<script src="../static/js/chart_history.js" type="text/javascript"></script>
<script src="../static/js/chart_template.js" type="text/javascript"></script>

<script src="../static/js/chart_event.js" type="text/javascript"></script>
<script src="../static/js/import.js" type="text/javascript"></script>


<script src="../static/js/jquery.ui.widget.js" type="text/javascript" ></script>
<script src="../static/js/jquery.iframe-transport.js" type="text/javascript" ></script>
<script src="../static/js/jquery.fileupload.js" type="text/javascript" ></script>


<script src="../static/js/user_login.js" type="text/javascript"></script>
<script src="../static/js/echarts.min.js" type="text/javascript"></script>
<script src="../static/widget/colorbutton.js" type="text/javascript"></script>
<script src="../static/widget/colorfield.js" type="text/javascript"></script>
<script src="../static/widget/datetime.js" type="text/javascript"></script>
<script src="../static/ace/src/ace.js" type="text/javascript" charset="utf-8" ></script>
<script src="../static/ace/src/mode-sql.js" type="text/javascript" charset="utf-8" ></script>
<script src="../static/ace/src/mode-json.js" type="text/javascript" charset="utf-8" ></script>

<script src="../static/ace/src/mode-json.js" type="text/javascript" charset="utf-8" ></script>
<script src="../static/ace/src/mode-json.js" type="text/javascript" charset="utf-8" ></script>

<script type="text/html" id="sourceContent2">${raw(chartSource.replace("\\n","\\\\n").replace("\\t","\\\\t"))}</script>
			

<style>
html, body {
    margin: 0;
    height: 100%;
}
.selected{color:red;}
.transform_logo{color:green;}
#sqlEditor {
    position: absolute;
    border:1px;
    border-style:solid;
    width: 700px;
    height: 277px;
}
#sourceEditor {
    position: absolute;
    border:1px;
    border-style:solid;
    width: 900px;
    height: 355px;
}
.categoryCls{
	color:black;
}
</style>
<script>


<g:each in="${chartEvent}" var="it" status="i">
    window["event${it.event_type.substring(0,1).toUpperCase()}${it.event_type.substring(1)}Source"] = 
    "${raw(it.event_source?it.event_source.replace("\r","\\r").replace("\n","\\n").replace("'","\\'"):"")}"
</g:each>



var nowMode
var nowDetailMode
var nowSeriesIndex
var nowDsActiveTab
var nowRemoteUrl

var nowRemoteAdapterId
var nowRemoteAdapterSource

var nowChartHistory = 2
var nowHistoryThemeId = {}
var nowHistoryThemeName = {}
var nowHistoryThemeSource = {}

var historyOption = {}

var displayTable
var rowMode
var dynamicSeries
var refreshTime

var uuid
var parentFileId
var fileName
var dateCreated
var lastUpdated
var nowChartTheme
var nowChartThemeSource
var nowChartThemeName

var nowTableTheme
var nowTableThemeSource
var nowTableThemeName

var nowChartSourceTip = ""
var nowChartSourceContent
var nowDataSource
var nowDataSetPanel
var nowRemoteDataSetPanel
var seriesMenuItems = []
var serieTypeCategoryId = {}
var serieCategoryMap = {}

var seriesOption = {}
var sqlEditor,sourceEditor
var chartId
var chartSql = ""
var chartSource = {}

var chartSourceDis = ""

var chartOption = JSON.parse('${chartOption.encodeAsRaw()}')
var chartBand = JSON.parse('${chartBand.encodeAsRaw()}')
var dataSourceDataset = JSON.parse('${dataSourceDataset.encodeAsRaw()}')

var chartParam = ${chartParam.encodeAsRaw()}


var chart1,chart2,chart3,chart4,chart5,chart6

var defaultOption = {
	'x坐标':'','平行坐标':'','地理坐标':'','角度坐标':'','角度坐标':'',
	'极坐标':'','单坐标':'','区域选择':'','时间行':'','半径坐标':'',
	'y坐标':'','数据缩放':'','雷达坐标':'','视觉映射':'','日历':'',
	'网格':'','图形':''
}

var lineOption = {}


// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields: ['id', 'text'],
    data : [
        {"id":0, "text":"是"},
        {"id":1, "text":"否"},    
    ]
});



init();

function toastSuccess(message) {
    Ext.toast({
        html: message?message:'操作成功！',
        title: '系统提示',
        width: 200,
        align: 't'
    });
}

function messageAlert(message) {
    Ext.Msg.alert('操作失败,错误原因如下:', message)
}
function ajaxPost(url,para) {
    Ext.getBody().mask("请稍等..."); 
    Ext.Ajax.request({
        url: url,
        params: para,
        success:function(response, opts) {
            console.log(response.responseText)
            var res = Ext.JSON.decode(response.responseText)
            Ext.getBody().unmask()
            if (res.success) {
                messageAlert(res.message)
            } else {
                toastSuccess(res.message)
            }
            //func(response)
        },
        failure: function(response, opts) {
            alert(1)
        }
    }); 
}
</script>    


<script>

            //Ext.Loader.setPath('widget', '../static/widget');
            //var d = Ext.create("Hy.Grid",{title: '系统登录'})
            Ext.define('MyApp.view.main.MainController', {
                extend : 'Ext.app.ViewController',

                routes : {
                    ':id1/:id2/:id3/:id4' : 'onHandle',
                    ':id1/:id2/:id3' : 'onHandle',
                    ':id1/:id2' : 'onHandle',
                    ':id' : 'onHandle'
                },

                onHandle : function(id1,id2,id3,id4) {
                    
                    
                }
            });

      

            Ext.on("resize", function(){appPanel.updateLayout()}, this);

            Ext.application({
                name: "MyApp",
                listen : {
                    controller : {
                        '#' : {
                            unmatchedroute : 'onUnmatchedRoute'
                        }
                    }
                },

                
                mainView: 'MyApp.view.main.MainController',
                onUnmatchedRoute : function(hash) {
                    alert("on unmatched route")
                },

                launch: function() {

                    Ext.tip.QuickTipManager.init();
                    Ext.EventManager.onWindowResize(function(width,height) {
                        console.log("onWindowResize")
                    });

                    <g:if test="${params.id==null}" >
                    	//uuid = Ext.create('Ext.data.identifier.Uuid').generate().replace(/-/g,"")
    					eval("var toption = "+$('#sourceContent2').html())
                        chartSource = toption
						chartSourceDis = $('#sourceContent2').html()
                    </g:if>
    				<g:else>
    					uuid = '${raw(chart.token)}'
    					chartId = ${params.id}
    					fileName = '${chart.file_name}'
    					parentFileId = '${chart.parent_file_id}'
    					chartSource = ${raw(chartSource.replace("\\n","\\\\n").replace("\\t","\\\\t"))}
                        chartSourceDis = sourceAfterParam($('#sourceContent2').html())
                        dateCreated = '${chart.date_created}'
    					lastUpdated = '${chart.last_updated}'
    					nowDataSource = '${chart.chart_datasource}'

                        if (nowDataSource=='-1') {
                            nowDsActiveTab = "文件数据"
                        }

                        if (nowDataSource=='-2') {
                            nowDsActiveTab = "远程数据"     
                        }

                        <g:if test="${chart.chart_sql!=null}" >
                            chartSql = '${raw(chart.chart_sql.replace("\r","\\r").replace("\n","\\n").replace("'","\\'"))}'
                        </g:if>
                        <g:else>
                            chartSql = ''
                        </g:else>
                        displayTable = ${chart.display_table?chart.display_table:false}
                        refreshTime = ${chart.refresh_time?chart.refresh_time:0}
                        rowMode = ${chart.row_mode?chart.row_mode:false}
                        dynamicSeries = ${chart.dynamic_series?chart.dynamic_series:false}
    					nowChartTheme = ${chart.theme_id}
                        nowChartThemeSource = ${raw(themeSource)}
    					nowChartThemeName = '${raw(themeName)}'

                        nowTableTheme = ${chart.table_theme_id}
    					nowTableThemeSource = '${raw(tableThemeSource.replace("\r","\\r").replace("\n","\\n").replace("'","\\'"))}'
    					nowTableThemeName = '${raw(tableThemeName)}'    

                        nowRemoteUrl = '${chart.remote_url}'

                        nowRemoteAdapterId = ${chart.remote_adapter_id}
                        nowRemoteAdapterSource = '${raw(remoteAdapterSource.replace("\r","\\r").replace("\n","\\n").replace("'","\\'"))}'
    				</g:else>

                    var map = new Ext.util.KeyMap({
				        target: Ext.getBody(),
				        binding: [
				            {
				                 key: "q",
				                 //ctrl: true,
				                 shift: true,
				                 handler: function() {
				                    chartBandUp()
                                 }
				            },
				            {
				                 key: "w",
				                 shift: true,
				                 handler: function() {
				                    chartBandDown()
                                    saveCategorySeq()
				                 }
				            },
				            {
                                 key: "d",
                                 shift: true,
                                 handler: function() {
                                    $('.dev').toggle()
                                    nowMode = $('.dev').is(':visible')
                                 }
                            },
                            {
                                key: 46,
                                ctrl: true,
                                handler: function() {
                                    if (true) {
                                        var selections = Ext.getCmp("chartTree").getSelection()
                                        if (selections.length>0) {
                                            var selId = selections[0].id
                                            console.log(selId)
                                            if (selId!="categoryroot") {
                                                if (selId.indexOf("category")!=-1) {
                                                    Ext.Ajax.request({
                                                        url: "../app/setdetailmode",
                                                        params: {
                                                            id:selId.substring(8),
                                                            detailMode:nowDetailMode
                                                        },
                                                        success:function(response, opts) {
                                                            if (nowDetailMode!=null) {
                                                                selections[0].remove()
                                                            }
                                                        }
                                                    })
                                                }

                                                if (selId.indexOf("chartInstance")!=-1) {
                                                    
                                                }
                                            }
                                        }    
                                    }
                                }
                            }

				        ]
				     });

                    <g:if test="${params.id==null}" >
                    /*Ext.MessageBox.show({
                        title: '新建图表',
                        msg: '请输入图表的名称:',
                        closable:false,
                        width:300,
                        buttons: Ext.MessageBox.OK,
                        multiline: true,
                        scope: this,
                        fn: function(btn, text) {
                            Ext.getCmp('profilePanel').setTitle('图表结构-'+text)
                        }
                    });*/

                    </g:if>

                    <g:if test="${session.userLogin==null}" >
                    window.location = "../static/login.html"
                    //loginWindow.show()
                    </g:if>                    
                    

                    window.appPanel = Ext.create('Ext.panel.Panel', {
                        //title:"",
                        layout: 'border',
                        frame:false,
                        frameHeader:false,
                        defaults: {
                            collapsible: false,
                            split: true,
                            bodyPadding: 0,
                            border:false
                        }, 
                        height:'100%',
                        width: '100%',  
                        dockedItems: [
                            {
                                xtype: 'toolbar',
                                dock: 'top',
                                items: [
                                    {
                                        text:'新建',
                                        plain:true,
                                        iconCls:'x-fa fa-folder',
                                        plan:true,
                                        xtype: 'button',
                                        handler:function() {
                                            Ext.MessageBox.show({
                                                msg: '正在载入配置, 请等待...',
                                                progressText: 'Loading...',
                                                width: 300,
                                                wait: {
                                                    interval: 200
                                                }
                                            });
                                        	window.location = "edit"
                                        }
                                    }, 
                                    {
                                        text:'打开',
                                        iconCls:'x-fa fa-folder-open',
                                        xtype: 'button',
                                        handler:function() {
                                        	fileWindow.show()
                                        	fileWindow.setTitle("打开")
                                        	Ext.getCmp("fileTreePanel").getStore().load()
                                        	console.log(fileWindow.items.items)
                                        	fileWindow.items.items[1].hide()

                                        }
                                    }, 
                                    {
                                        text:'保存',
                                        xtype: 'button',
                                        iconCls:'x-fa fa-save',
                                        handler:function() {



                                        	if (chartId==null) {
                                        		fileWindow.show()
                                        		fileWindow.setTitle("保存")
                                        		fileWindow.items.items[1].show()
                                        		Ext.getCmp("fileTreePanel").getStore().load()
                                        	} else {
                                        		var chartDatasource = nowDataSource

                                                if (nowDsActiveTab=="文件数据") {
                                                    chartDatasource = "-1"
                                                }

                                                if (nowDsActiveTab=="远程数据") {
                                                    chartDatasource = "-2"
                                                }

                                        		Ext.Ajax.request({
									                url: "../file/save",
									                params: {
                                                        eventClickSource:window.eventClickSource,
                                                        eventDblclickSource:window.eventDblclickSource,
                                                        eventMousedownSource:window.eventMousedownSource,
                                                        eventMousemoveSource:window.eventMousemoveSource,
                                                        eventMouseupSource:window.eventMouseupSource,
                                                        eventMouseoverSource:window.eventMouseoverSource,
                                                        eventMouseoutSource:window.eventMouseoutSource,
									                    displayTable:displayTable,
                                                        refreshTime:refreshTime,
                                                        rowMode:rowMode,
                                                        dynamicSeries:dynamicSeries,
                                                        fileName:fileName,
									                    parentFileId:parentFileId,
									                    isDir:false,
									                    chartDatasource:chartDatasource,
									                    chartSql:chartSql,
                                                        oldChartId:chartId,
									                    token:uuid,
                                                        remoteUrl:nowRemoteUrl,
									                    themeId:nowChartTheme,
                                                        tableThemeId:nowTableTheme,
                                                        nowRemoteAdapterId:nowRemoteAdapterId,
									                    //chartSource:nowChartSourceContent!=null?nowChartSourceContent:chartSource
                                                        chartSource:$('#sourceContent2').html()
									                },
									                success:function(response, opts) {
									                	var res = Ext.JSON.decode(response.responseText)
                                                        //chartSource = nowChartSourceContent!=null?nowChartSourceContent:JSON.stringify(chartSource)
									                	chartId = res.chartFile.id
								                        uuid = res.chartFile.token
								                        fileName = res.chartFile.fileName
								                        parentFileId = res.chartFile.parentFileId
								                        
								                        dateCreated = new Date(res.chartFile.dateCreated)
									                	dateCreated = Ext.Date.format(dateCreated, 'Y-m-d H:i')

									                	lastUpdated = new Date(res.chartFile.lastUpdated)
									                	lastUpdated = Ext.Date.format(lastUpdated, 'Y-m-d H:i')

								                        //chartSql = res.chartFile.chartSql
								                        //chartSource = Ext.JSON.decode(res.chartFile.chartSource)
								                        Ext.getCmp('chartProperty').enable()
								                        Ext.getCmp('profilePanel').setTitle(res.chartFile.fileName)
								                        Ext.toast('图表保存成功！');
                                                        //chart1 = echarts.init(document.getElementById('chart2'));

                                                        //chart2.setOption(chartSource) 
                                                        saveChartHistory()              
									                }
									            }); 
                                        	}
                                        	
                                        }
                                    }, 
                                    {
                                        text:'另存为',
                                        xtype: 'button',
                                        id:'chartSaveAs',
                                        iconCls:'x-fa fa-save',
                                        handler:function() {
                                        	fileWindow.show()
                                        	fileWindow.setTitle("另存为")
                                        	fileWindow.items.items[1].show()
                                        	Ext.getCmp("fileTreePanel").getStore().load()
                                        }
                                    }, 
                                    {
                                        text:'图表属性',
                                        xtype: 'button',
                                        <g:if test="${params.id==null}" >
                                        	disabled:true,
                                        </g:if>
                                        id:'chartProperty',
                                        iconCls:'x-fa fa-table',
                                        handler:function() {
                                        	Ext.getCmp('propertyToken').setValue('<a href="../chart/preview?token='+uuid+'" target="_blank">'+uuid+'</a>')
                                        	Ext.getCmp('propertyFileName').setValue(fileName)
                                        	Ext.getCmp('propertyCreateDate').setValue(dateCreated.substring(0,16))
                                        	Ext.getCmp('propertyUpdateDate').setValue(lastUpdated.substring(0,16))
                                        	
                                            if (rowMode!=null && rowMode!="") {
                                                Ext.getCmp('rowMode').setValue(rowMode)
                                            }
                                            if (displayTable!=null && displayTable!="") {
                                                Ext.getCmp('displayTable').setValue(displayTable)
                                            }
                                            if (dynamicSeries!=null && dynamicSeries!="") {
                                                Ext.getCmp('dynamicSeries').setValue(dynamicSeries)
                                            }
                                            if (refreshTime!=null && refreshTime!="") {
                                                Ext.getCmp('refreshTime').setValue(refreshTime)
                                            }
                                            

                                        	//Ext.getCmp('clientJavascript').setValue("<div chartToken='"+uuid+"' style='width:500px;height:500px'></div>")

                                        	chartInfoWindow.show()
                                        	chartParamStore.getProxy().extraParams.id = chartId
                                    		chartParamStore.load()

                                        }
                                    },
                                    {
                                        text:'从模板新建',
                                        iconCls:'x-fa fa-wpforms',
                                        xtype: 'button',
                                        handler:function() {
                                            templateWindow.setTitle("导入模板")
                                            templateWindow.show()
                                            Ext.getCmp('templateTabPanel').setHeight(782)
                                            Ext.getCmp("templateNamePanel").setHidden(true)
                                        }
                                    },
                                    {
                                        text:'导出到模板',
                                        iconCls:'x-fa fa-wpforms',
                                        xtype: 'button',
                                        handler:function() {
                                            templateWindow.setTitle("导出模板")
                                            templateWindow.show()
                                            Ext.getCmp('templateTabPanel').setHeight(746)
                                            Ext.getCmp('templateName').setValue('')
                                            Ext.getCmp('templateDesc').setValue('')
                                            Ext.getCmp("templateNamePanel").setHidden(false)
                                        }
                                    },
                                    {
                                        text:'数据源',
                                        iconCls:'x-fa fa-database',
                                        plan:true,
                                        xtype: 'button',
                                        handler:function() {
                                        	dataSourceWindow.show();
                                        }
                                    }
                                    <%
                                      if (session.userLogin!=null && session.userLogin.user_login_name=="admin") {
                                    //if (session.userLogin==null || session.userLogin.user_login_name=="admin") {
                                    %>
                                    ,{
                                        text:'用户管理',
                                        iconCls:'x-fa fa-user',
                                        plan:true,
                                        id:'userManager',
                                        xtype: 'button',
                                        handler:function() {
                                            userLoginWindow.show()
                                        }
                                    },
                                   	{
                                        text:'刷新配置',
                                        iconCls:'x-fa fa-refresh',
                                        plan:true,
                                        id:'reloadCache',
                                        xtype: 'button',
                                        handler:function() {
                                        	reloadCache()
                                        }
                                    },
                                    {
                                        text:'刷新缓存',
                                        iconCls:'x-fa fa-refresh',
                                        plan:true,
                                        id:'reloadChartCache',
                                        xtype: 'button',
                                        handler:function() {
                                            reloadChartCache()
                                        }
                                    },
                                    {
                                        text:'导入',
                                        iconCls:'x-fa fa-angle-double-down',
                                        plan:true,
                                        id:'importAll',
                                        xtype: 'button',
                                        handler:function() {
                                            $('#fileupload')[0].click()
                                        }
                                    },
                                    {
                                        text:'导出',
                                        iconCls:'x-fa fa-angle-double-up',
                                        plan:true,
                                        id:'exportAll',
                                        xtype: 'button',
                                        handler:function() {
                                            exportAll()
                                        }
                                    },
                                    {
                                        xtype:'container',
                                        hidden:true,
                                        html:'<span class="btn btn-success fileinput-button" id="fileUploadContainer">上传文件'+
                                            '<input id="fileupload" type="file" name="fileupload" ></span>',
                                        listeners:{
                                            render:function( obj, eOpts ) {
                                                $('#fileupload').fileupload({
                                                    url: "../app/importall",
                                                    dataType: 'json',
                                                    start:function() {
                                                        Ext.MessageBox.show({
                                                            title: '正在上传文件',
                                                            msg: '请稍等...',
                                                            progressText: '开始上传...',
                                                            width:300,
                                                            progress:true,
                                                            closable:false
                                                        });
                                                    },
                                                    stop:function() {
                                                        Ext.MessageBox.hide();
                                                        //Ext.toast("导入成功")
                                                        openImportWindow()
                                                    },
                                                    add: function (e, data) {
                                                        data.submit();

                                                    },
                                                    done: function (e, data) {



                                                    },
                                                    progressall: function (e, data) {
                                                        console.log(data)
                                                        var progress = parseInt(data.loaded / data.total * 100, 10);

                                                        Ext.MessageBox.updateProgress(progress/100, progress + '% 已上传');
                                                        if (progress==100) {

                                                        }
                                                    }
                                                }).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');
                                            }
                                        }
                                    }
                                    <%
                                    }
                                    %>

                                    <%
                                    if (session.userLogin!=null) {
                                    %>
                                    ,
                                    {
                                        text:'注销',
                                        iconCls:'x-fa fa-power-off',
                                        plan:true,
                                        id:'zhuxiao',
                                        xtype: 'button',
                                        handler:function() {
                                            logout()
                                        }
                                    }
                                    <%
                                    }
                                    %>
                                ]
                            }
                        ],
                        items:[
                            {
                                title: '',
                                header:false,
                                split:true,
                                region: 'south',
                                height: 355,
                                id:'attrPanel',
                                //minHeight: 75,
                                //maxHeight: 150,
                                //width:1920,
                                //autoScroll:true,
                                scrollable: true,
                                items:[

                                ]
                            },
                            {
                                title: '',//图表预览
                                collapsible: false,
                                split:true,
                                frame:false,
                                region: 'center',
                                width:1200,
                                scrollable:true,
                                margin: '5 0 0 0',
                                items:[
                                    {
                                        xtype:'container',
                                        layout:'hbox',
                                        scrollable:'x',
                                        items:[
                                            {
                                                xtype:'container',
                                                //width:900,
                                                id:'chartPreview',
                                                html:'<div id="chart1" style="width: 900px;height:'+(document.documentElement.clientHeight-400)+'px;"></div>',
                                                listeners:{
                                                    render:function( obj, eOpts ) {
                                                        
                                                        eval ("var myOption = "+$('#sourceContent2').html())
                                                        eval ("var myOption1 = "+chartSourceDis)
                                                        if (rowMode) {

                                                            //window.datasetBackup = Ext.clone(chartSource.dataset)
                                                            //var tobj = JSON.parse(chartSourceDis)
                                                            //tobj.dataset = rowToColumn(chartSource.dataset)
                                                            //chartSourceDis = JSON.stringify(tobj)
                                                            //chartSource.dataset = rowToColumn(chartSource.dataset)
                                                        } else {

                                                        }


                                                        if (displayTable) {
                                                            if (nowTableTheme==null||nowTableTheme=="") {
                                                                renderDefaultTable(myOption1)
                                                            } else {
                                                                var html = ""
                                                                try {
                                                                    html = baidu.template(nowTableThemeSource,
                                                                        {
                                                                            rows:myOption1.dataset.source,
                                                                            cols:myOption1.dataset.dimensions
                                                                        }
                                                                    );  
                                                                } catch(e) {
                                                                    console.log(e)
                                                                }
                                                                $('#chart1').html(html)
                                                            }
                                                        } else {
                                                            var obj = nowChartThemeSource
                                                            echarts.registerTheme(nowChartThemeName, obj)
                                                            chart1 = echarts.init(document.getElementById('chart1'),nowChartThemeName);
                                                            try {
                                                                
                                                                chart1.setOption(myOption1)
                                                                
                                                            } catch (e) {
                                                                console.log(e)
                                                            }
                                                        }
                                                        
                                                    }
                                                    
                                                }
                                            },
                                            {
                                                xtype:'container',
                                                layout:'vbox',
                                                //width:600,
                                                //scrollable:true,
                                                items:[
                                                    {
                                                        xtype:'container',
                                                        layout:'hbox',
                                                        items:[
                                                            {
                                                                xtype:'container',
                                                                html:'<a href="javascript:setChart(2)">'+
                                                                '<div id="chart2" style="border:0px solid black;width: 314px;height:224px;"></div>'+
                                                                '</a>'
                                                            },
                                                            {
                                                                xtype:'container',
                                                                html:'<a href="javascript:setChart(3)">'+
                                                                '<div id="chart3" style="border:0px solid black;width: 314px;height:224px;"></div>'+
                                                                '</a>'
                                                            }
                                                        ]
                                                    },
                                                    {
                                                        xtype:'container',
                                                        layout:'hbox',
                                                        items:[
                                                            {
                                                                xtype:'container',
                                                                html:'<a href="javascript:setChart(4)">'+
                                                                '<div id="chart4" style="border:0px solid black;width: 314px;height:224px;"></div>'+
                                                                '</a>'
                                                            },
                                                            {
                                                                xtype:'container',
                                                                html:'<a href="javascript:setChart(5)">'+
                                                                '<div id="chart5" style="border:0px solid black;width: 314px;height:224px;"></div>'+
                                                                '</a>'
                                                            }
                                                        ]
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                    
                                ],
                                
                            },
                            {
                                title: '<g:if test="${params.id!=null}">${chart.file_name}</g:if><g:else>新的图表</g:else>',
                                region:'west',
                                id:'profilePanel',
                                split:true,
                                frame:true,
                                frameHeader:false,
                                floatable: false,
                                listeners:{
                                    resize:function ( obj, width, height, oldWidth, oldHeight, eOpts ) {
                                        console.log(width)
                                    }
                                },
                                margin: '5 0 0 0',
                                tools:[
                                    {
										iconCls: 'x-fa fa-bars',
                                        id:'toolMini',
                                        tooltip:'精简',
                                        handler: function(event, toolEl, panelHeader) {
                                            this.setIconCls(this.iconCls.indexOf('selected')==-1?'x-fa fa-bars selected':'x-fa fa-bars')
                                            nowDetailMode = this.iconCls.indexOf('selected')==-1?null:1
                                            Ext.getCmp('toolStandard').setIconCls('x-fa fa-align-center')
                                            Ext.getCmp('toolMax').setIconCls('x-fa fa-align-justify')
                                            changeDetailCategory(this)

                                        }
                                    },
                                    {
                                        iconCls: 'x-fa fa-align-center',
                                        id:'toolStandard',
                                        tooltip:'标准',
                                        handler: function(event, toolEl, panelHeader) {
                                            this.setIconCls(this.iconCls.indexOf('selected')==-1?'x-fa fa-align-center selected':'x-fa fa-align-center')
                                            nowDetailMode = this.iconCls.indexOf('selected')==-1?null:2
                                            Ext.getCmp('toolMini').setIconCls('x-fa fa-bars')
                                            Ext.getCmp('toolMax').setIconCls('x-fa fa-align-justify')   
                                            changeDetailCategory(this)       
                                        }
                                    },
                                    {
                                        iconCls:'x-fa fa-align-justify',
                                        id:'toolMax',
                                        tooltip:'详细',
                                        callback: function(panel, tool, event) {
                                            this.setIconCls(this.iconCls.indexOf('selected')==-1?'x-fa fa-align-justify selected':'x-fa fa-align-justify')
                                            nowDetailMode = this.iconCls.indexOf('selected')==-1?null:3
                                            Ext.getCmp('toolMini').setIconCls('x-fa fa-bars')
                                            Ext.getCmp('toolStandard').setIconCls('x-fa fa-align-center')      
                                            changeDetailCategory(this) 
                                        }
                                    }
                                ],
                                items:[
                                    {
                                        xtype: 'treepanel',
                                        id:'chartTree',
                                        //draggable:true,
                                        width: 338,
                                        height: document.documentElement.clientHeight-355-77,
                                        scrollable:true,
                                        reserveScrollbar: true,
                                        useArrows: true,
                                        rootVisible: false,
                                        multiSelect: false,
                                        singleExpand: false,
                                        listeners:{
                                        	itemcontextmenu:function( obj, record, item, index, e, eOpts )  {
                                        		//console.log(record)
												var menuItems = []

												if (record.data.jsonStr=="xAxis"||record.data.jsonStr=="yAxis"||record.data.jsonStr=="grid"){
													e.preventDefault();
													e.stopEvent();
													menuItems.push(
														{
															text:'增加'+record.data.text,  
															//iconCls:'leaf',
															handler:function(){}
														}
													)
												}

												if (record.id == "chartInstance" ) {
													menuItems = seriesMenuItems
													e.preventDefault();
													e.stopEvent();
												}

                                                if (record.id != "chartInstance" && record.id.indexOf("chartInstance")!=-1) {
                                                    e.preventDefault();
                                                    e.stopEvent();
                                                    menuItems.push(
                                                        {
                                                            text:'删除',  
                                                            iconCls:'x-fa fa-minus',
                                                            handler:function(){
                                                                //console.log(record)
                                                                record.remove()
                                                                for (var i=0;i<chartSource.series.length;i++) {
                                                                    if(i==record.data.index) {
                                                                        chartSource.series.splice(i,1)
                                                                        //chart1.setOption(chartSource,{notMerge:true})
                                                                        break;
                                                                    }
                                                                }
                                                                eval("var myOption = "+chartSourceDis)
                                                                var chartSourceCopy = myOption
                                                                for (var i=0;i<chartSourceCopy.series.length;i++) {
                                                                    if(i==record.data.index) {
                                                                        chartSourceCopy.series.splice(i,1)
                                                                        chartSourceDis = formatSource(chartSourceCopy)
                                                                        chart1.setOption(chartSourceCopy,{notMerge:true})
                                                                        break;
                                                                    }
                                                                }

                                                                $('#sourceContent2').html(formatSource(chartSource))
                                                                Ext.getCmp("chartTree").getSelectionModel().select(0)

                                                            }
                                                        }
                                                    )
                                                }

                                        		var nodemenu=new Ext.menu.Menu({
													items:menuItems
												});  
													  
												nodemenu.showAt(e.getPoint());
                                        	},
                                            select:function( obj, record, index, eOpts ) {
                                                console.log(record)
                                            	nowSeriesIndex = findSeriesIndex(record)

                                                if (record.id=='dataSource') {
                                                	updateDataSource()
                                                }
                                                
                                                if ((record.id+"").indexOf('chartInstance')!=-1 && record.id!="chartInstance") {
                                                	updateCategoryConfigs(record)
                                                }

                                                
                                                if ((record.id+"").indexOf('category')!=-1) {
                                                	/*Ext.Ajax.request({
												        url: "../dev/savecategoryindex",
												        params: {id:record.id.substring(8),index:record.data.index}
												    })*/
                                                    updateCategoryConfigs(record)
                                                }

                                                if (record.id=='chartSource') {
                                                    updateChartSource()
                                                }
                                                if (record.id=='chartTheme') {
                                                    updateChartTheme()
                                                }
                                                if (record.id=='chartEvent') {
                                                    updateChartEvent()
                                                }

                                            }       
                                        },
                                        dockedItems: [{
                                            xtype: 'toolbar',
                                            dock: 'top',
                                            items: [

                                                {
                                                    xtype: 'segmentedbutton',
                                                    allowToggle: false,
                                                    width:'100%',
                                                    items: [
                                                        {
                                                            text: '折线图',
                                                            handler:function() {
                                                                createSerieBand("line",true)
                                                            }
                                                        }, 
                                                        {
                                                            text: '柱状图',
                                                            handler:function() {
                                                                createSerieBand("bar",true)
                                                            }
                                                        }, 
                                                        {
                                                            text: '饼图',
                                                            handler:function() {
                                                                createSerieBand("pie",true)
                                                            }
                                                        }, 
                                                        {
                                                            text: '散点图',
                                                            handler:function() {
                                                                createSerieBand("scatter",true)
                                                            }
                                                        }, 
                                                        {
                                                            xtype: 'splitbutton',
                                                            text: '雷达图',
                                                            handler:function() {
                                                                createSerieBand("radar",true)
                                                            },
                                                            menu: [
                                                                { 
                                                                    text: '仪表盘',
                                                                    handler:function() {
                                                                        //createSerieBand("gauge",true)
                                                                    }
                                                                },
                                                                { 
                                                                    text: '桑基图',
                                                                    handler:function() {
                                                                        //createSerieBand("sankey",true)
                                                                    }
                                                                },
                                                                { 
                                                                    text: '矩形树图',
                                                                    handler:function() {
                                                                        //createSerieBand("treemap",true)
                                                                    } 
                                                                }
                                                            ]
                                                        }
                                                    ]
                                                }


                                                /*
                                                { 
                                                    xtype: 'button', text: '折线图',
                                                    handler:function() {
                                                        createSerieBand("line",true)
                                                    }
                                                },
                                                { 
                                                    xtype: 'button', text: '柱状图',
                                                    handler:function() {
                                                        createSerieBand("bar",true)
                                                    }
                                                },
                                                { 
                                                    xtype: 'button', text: '饼图',
                                                    handler:function() {
                                                        createSerieBand("pie",true)
                                                    } 
                                                },
                                                { 
                                                    xtype: 'button', text: '散点图',
                                                    handler:function() {
                                                        createSerieBand("scatter",true)
                                                    }
                                                },
                                                { 
                                                    xtype: 'button', text: '雷达图',
                                                    handler:function() {
                                                        createSerieBand("radar",true)
                                                    }
                                                }*/
                                            ]
                                        }],

                                        columns: [
                                            {
                                                xtype: 'treecolumn', 
                                                text: '',
                                                dataIndex: 'text',
                                                flex: 1,
                                                sortable: true
                                            }
                                        ],


                                        store: {
                                        	//autoSort:false,
                                            listeners:{
                                                load:function( obj, records, successful, operation, node, eOpts ) {
                                                    Ext.getCmp("chartTree").getSelectionModel().select(0)
                                                    <g:if test="${params.id==null}" >
                                                    </g:if>
                                                    <g:else>
                                                        if (chartSource.series!=null) {
                                                            var seriesLength = chartSource.series.length
                                                            for(var i=0;i<seriesLength;i++) {
                                                                //console.log(chartSource.series[i].type)
                                                                createSerieBand(chartSource.series[i].type,false)
                                                            }
                                                        }
                                                    </g:else>

                                                    Ext.getCmp('chartTree')
                                                    .getStore()
                                                    .getNodeById('categoryroot')
                                                    .set("qtip","Shift+Q:配置类目上移<br>"+
                                                    "shift+W:配置类目下移<br>"+
                                                    "Shift+D:开发与正常模式切换<br>"+
                                                    "Ctrl+Delete:配置类目过滤")

                                                    var store = Ext.getCmp('chartTree').getStore()
                                                    Ext.getCmp('chartTree').expandNode(store.getNodeById('chartInstance'))
                                                    Ext.getCmp('chartTree').expandNode(store.getNodeById('categoryroot'))
                                                    //Ext.getCmp("chartTree").expandAll()
                                                }
                                            },
                                            type: 'tree',
                                            //folderSort: false,
                                            proxy: {
                                                type: 'ajax',
                                                url: '../app/chartband'
                                                <g:if test="${params.id!=null}">,extraParams:{chartId:${params.id}}</g:if>
                                            }
                                        }
                                    }
                                ]
                            }
                        ],
                        renderTo: Ext.getBody()
                    });            
                    
                    
                    
                    
                    
                    
                    

                }
            });


           
        </script>

</head>

<body>
</body>

</html>